<template>
  <div>
    <div class="aui-content aui-margin-b-15 aui-bg-f">
      <div v-if="finished && items.length == 0" v-cloak>
        <div class="no-data aui-text-center aui-text-9">
          <i class="iconfont icon-lujing1161"></i>
          <div class="aui-ftn16">
            空空如也~
          </div>
        </div>
      </div>
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        :disabled="disabled"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="text"
          @load="onLoad"
        >
          <div
            class="aui-padded-10 van-hairline--bottom item"
            v-for="(item, index) in items"
            :key="index"
            v-cloak
          >
            <div class="aui-padded-b-10 aui-text-3 aui-ftn13">
              <van-row class="aui-padded-t-10">
                <van-col span="18" class="aui-text-7">
                  <div
                    class="aui-ftn14 aui-font-weight"
                    v-text="item.store"
                  ></div>
                  <van-row class="aui-padded-t-10">
                    <van-col span="12" class="aui-text-7"
                      >商家QQ: {{ item.qq }}</van-col
                    >
                    <van-col span="12" class="aui-text-7"
                      >下单平台: {{ item.from }}</van-col
                    >
                  </van-row>
                  <van-row class="aui-padded-t-10" align="center">
                    <van-col span="12" class="aui-text-7"
                      >状态：{{ item.status }}</van-col
                    >
                    <van-col
                      span="12"
                      class="aui-text-7"
                      v-text="item.createtime"
                    ></van-col>
                  </van-row>
                  <van-row class="aui-ftn13 aui-padded-t-10" v-if="item.mobile">
                    <van-col span="24" class="aui-ftn13"
                      >商家手机号:{{ item.mobile }}</van-col
                    >
                  </van-row>
                  <van-row v-if="item.reason" class="aui-padded-t-10">
                    <van-col span="24" class="aui-ftn13 aui-text-red"
                      >备注:{{ item.reason }}</van-col
                    >
                  </van-row>
                </van-col>
                <van-col span="6" class="aui-text-center">
                  <img
                    :src="item.image"
                    alt=""
                    @click="fnPreview(item.image)"
                  />
                </van-col>
              </van-row>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import User from "../../service/user.js";
export default {
  data() {
    return {
      items: [], //异步查询数据
      loading: false, //自定义底部加载中提示
      finished: false, //自定义加载完成后的提示文案
      refreshing: false, //清空列表数据
      pageNo: 0, //当前页码
      text: "",
      disabled: false,
      is_loading: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    onLoad() {
      if (this.loading && !this.finished && !this.is_loading) {
        this.is_loading = true;
        this.pageNo++;
        User.fnGetRecommend({
          uid: this.$store.state.uid,
          p: this.pageNo,
          n: 20,
          isToken: true,
          isLoading: true,
        }).then((res) => {
          this.is_loading = false;
          // 加载状态结束
          this.loading = false;
          if (res && res.status) {
            this.items = this.items.concat(res.data);
          } else {
            this.finished = true;
            if (this.items.length > 0) this.text = "没有更多了";
          }
        });
      }
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.pageNo = 0;
      this.text = "";
      this.refreshing = false;
      this.items = [];
      this.onLoad();
    },
    // 预览图片
    fnPreview: function(path) {
      this.utils.fnPreviewPic([path]);
    },
  },
};
</script>

<style scoped>
img {
  width: 60px;
  height: 60px;
}
</style>
